<template>
  <div class="dynaHeaderline">
    <!--头部查找-->
    <el-row>
      <!-- <el-col :span="5">
        <div class="grid-content bg-purple-dark">
          <el-input
            style="width:255px;"
            placeholder="头条标题"
            v-model="title"
            size="small">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </el-col> -->
      <el-col :span="2" :offset="22">
        <div class="grid-content bg-purple-dark">
          <!-- <el-button type="success" size="small">批量删除</el-button> -->
          <el-button
            @click="
              currentId = null;
              dialogVisible = true;
            "
            type="primary"
            size="small"
            >添加</el-button
          >
        </div>
      </el-col>
    </el-row>
    <!--动态头条表格列-->
    <el-table
      class="dyNewList"
      :data="tableData"
      border
      style="width: 100%"
      :height="tableHeight"
    >
      <el-table-column
        prop="num"
        label="序号"
        :width="50"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="title"
        label="标题"
        align="center"
      ></el-table-column>
      <el-table-column label="是否显示" width="150" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.is_valid"
            :width="50"
            :active-value="1"
            :inactive-value="0"
            @change="isShow(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="上传时间" align="center">
        <template slot-scope="scope">
          {{
            scope.row.created_at ? scope.row.created_at.date.split(".")[0] : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="排序">
        <template slot-scope="scope">
          <el-input
            @change="setSort(scope.row)"
            type="number"
            v-model="scope.row.sort"
          >
          </el-input>
        </template>
      </el-table-column>
      <el-table-column prop="handle" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            @click="
              currentId = scope.row.id;
              pageTitle = scope.row.title;
              detail = scope.row.detail;
              dialogVisible = true;
            "
            type="success"
            size="mini"
            >编辑</el-button
          >
          <el-button @click="noticeDetele(scope.row.id)" type="info" size="mini"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="table-bottom-bar">
      <div></div>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="size"
        layout="total, prev, pager, next"
        :total="total"
        :background="true"
      >
      </el-pagination>
    </div>
    <!--模态框-->
    <div class="modal">
      <el-dialog
        width="75%"
        title="编辑自定义详情"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        @close="close"
        :visible.sync="dialogVisible"
      >
        <div class="dialog-contain">
          <el-row type="flex" class="row-bg">
            <el-col :span="2">
              <div
                class="grid-content bg-purple-dark"
                style="padding-right:10px;line-height:35px;text-align: right"
              >
                <span style="color:#FF0000;padding:0 5px;">*</span>标题:
              </div>
            </el-col>
            <el-col :span="7">
              <div class="grid-content bg-purple-dark">
                <el-input
                  v-model="pageTitle"
                  placeholder="请输入标题"
                ></el-input>
              </div>
            </el-col>
          </el-row>

          <el-row type="flex" class="row-bg detail">
            <el-col :span="2">
              <div
                class="grid-content bg-purple-dark"
                style="padding-right:10px;line-height:35px;text-align: right"
              >
                详情:
              </div>
            </el-col>
            <el-col :span="10">
              <div class="grid-content bg-purple-dark">
                <el-input
                  v-model="detail"
                  class="textarea"
                  type="textarea"
                  rows="15"
                  placeholder="请输入内容"
                  show-word-limit
                  resize="none"
                >
                </el-input>
              </div>
            </el-col>
          </el-row>
        </div>
        <!--模态框底部-->
        <div slot="footer" class="dialog-footer">
          <el-button
            @click="
              dialogVisible = false;
              pageTitle = '';
              detail = '';
            "
            >取 消</el-button
          >
          <el-button type="primary" @click="save">保存信息</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getNoticeList,
  setNoticeSort,
  editNoticeSort,
  noticeDelete
} from "@/api/notice-mng";
export default {
  name: "DynamicsHeaderline",
  data() {
    return {
      title: "",
      tableData: [],
      dialogVisible: false,
      pageTitle: "",
      detail: "",
      total: 0,
      size: 0,
      page: 1,
      tableHeight: 0,
      currentId: null
    };
  },
  methods: {
    isShow(row) {
      editNoticeSort({
        id: row.id,
        is_valid: row.is_valid
      }).then(res => {});
    },
    setSort(row) {
      editNoticeSort({
        id: row.id,
        sort: row.sort
      }).then(res => {
        if (res.code === 200) {
          this.getNoticeList(this.page);
        }
      });
    },
    noticeDetele(id) {
      this.$confirm("确认删除该头条?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        noticeDelete({ id }).then(res => {
          if (res.code === 200) {
            this.getNoticeList(this.page);
          }
        });
      });
    },
    getNoticeList(page) {
      getNoticeList({
        page,
        noticeType: 2
      }).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.page = res.data.current_page;
          this.size = res.data.per_page;
        }
      });
    },
    save() {
      let submitData = this.currentId?editNoticeSort:setNoticeSort
      submitData({
        id: this.currentId ? this.currentId : undefined,
        title: this.pageTitle,
        detail: this.detail,
        is_valid: 0,
        status: 2
      }).then(res => {
        if (res.code === 200) {
          this.$message({
            message: "添加成功",
            type: "success"
          });
          this.dialogVisible = false;
          this.pageTitle = "";
          this.detail = "";
          this.getNoticeList(this.page);
        }
      });
    },
    close() {
      this.pageTitle = "";
      this.pictureCover = "";
      this.detail = "";
    },
    handleCurrentChange(page) {
      this.getNoticeList(page);
    },
    changeSize() {
      this.tableHeight = document.body.clientHeight - 180;
      window.onresize = () => {
        this.changeSize();
      };
    }
  },
  created() {
    this.getNoticeList(1);
    this.changeSize();
  }
};
</script>

<style lang="scss" scoped>
.dynaHeaderline {
  width: 98%;
  margin-left: 20px;
  margin-top: 20px;
  .dyNewList {
    overflow: auto;
    margin-top: 20px;
    max-height: 670px;
    .sort {
      display: inline-block;
      width: 80px;
      height: 25px;
      line-height: 25px;
      border: 1px solid #eeeeee;
    }
  }
  .paging {
    float: right;
    margin-top: 20px;
  }
  .modal {
    .dialog-contain {
      .el-row {
        margin: 30px 0;
      }
      .upload {
        .upload {
          display: inline-block;
          width: 110px;
          height: 36px;
          line-height: 36px;
          background-color: #f9f9f9;
          text-align: center;
          border: 1px solid #dddddd;
        }
        #upload {
          opacity: 0;
          width: 10px;
          height: 10px;
          margin-left: -110px;
        }
        .suggest {
          line-height: 36px;
          color: #ff0000;
        }
      }
      .effectImg {
        .effectImg {
          position: relative;
          width: 165px;
          height: 119px;
          text-align: center;
          line-height: 119px;
          background-color: #dddddd;
          .el-icon-picture {
            display: inline-block;
            font-size: 28px;
            color: #8c939d;
          }
          .img {
            position: absolute;
            top: 0;
            left: 0;
          }
        }
      }
      .detail {
        .textarea {
          overflow: auto;
        }
      }
    }
  }
}
</style>
